<template>
  <div class="Singer-box">
    <h2>热门音乐人</h2>
    <ul class="Singer-list">
      <li v-for="item in singers" :key="item.id" @click="$router.push({name:'Artists',params:{id:item.id}})">
        <a href="javascript:;">
          <img :src="item.img1v1Url" alt>
        </a>
        <span>{{item.name}}</span>
      </li>
    </ul>
    <div class="Singer-side">
      <h3>歌手分类</h3>
      <ul class="Singer-side_list">
        <li @click="$router.push({name:'Singersort',params:{cat:5001}})">
          <img src="https://p2.music.126.net/-JxOlVRUl3OFqNkCIu9dlw==/678398674363509.jpg" alt="">
          <dl>
            <dt>入驻歌手</dt>
            <dd>张惠妹</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',params:{cat:1001}})">
          <img src="https://p1.music.126.net/jq8QrogorsmwJv3Xn7_UOQ==/109951163765021940.jpg" alt="">
          <dl>
            <dt>华语男歌手</dt>
            <dd>薛之谦</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',params:{cat:1002}})">
          <img src="https://p1.music.126.net/f2R3-se6DLlcucIusS6mQQ==/109951163610593454.jpg" alt="">
          <dl>
            <dt>华语女歌手</dt>
            <dd>花粥</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',params:{cat:1003}})">
          <img src="https://p2.music.126.net/ohub446GfbVtIJ9_H-cjpw==/7719671138847203.jpg" alt="">
          <dl>
            <dt>华语组合/乐队</dt>
            <dd>房东的猫</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',params:{cat:2001}})">
          <img src="https://p1.music.126.net/AsrGD4Sf0HWJ3mK-Y__PLw==/18981968742063387.jpg" alt="">
          <dl>
            <dt>欧美男歌手</dt>
            <dd>艾兰·沃克</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',params:{cat:2002}})">
          <img src="https://p1.music.126.net/dKr8EogX6EZKiufPSUc3XQ==/622323581345739.jpg" alt="">
          <dl>
            <dt>欧美女歌手</dt>
            <dd>克丽丝叮</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',params:{cat:2003}})">
          <img src="https://p1.music.126.net/jlTninHATWKhRoJqJA-JUQ==/18778559092750735.jpg" alt="">
          <dl>
            <dt>欧美组合/乐队</dt>
            <dd>酷玩乐队</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:6001}})">
          <img src="https://p2.music.126.net/28e5ODJRXYLhZ6s3seFoMQ==/109951164021265258.jpg" alt="">
          <dl>
            <dt>日本男歌手</dt>
            <dd>米津玄师</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:6002}})">
          <img src="https://p2.music.126.net/TReiDb4RmfnXcugKYzWU2A==/109951163781763573.jpg" alt="">
          <dl>
            <dt>日本女歌手</dt>
            <dd>Ayasa绚沙</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:6003}})">
          <img src="https://p1.music.126.net/4v58OLejhQRatNYKIZ7BJQ==/1389782699016779.jpg" alt="">
          <dl>
            <dt>日本组合/乐队</dt>
            <dd>ラムジ</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:7001}})">
          <img src="https://p1.music.126.net/JVgT0Bq7zwXYcqvvyyotig==/109951163537429532.jpg" alt="">
          <dl>
            <dt>韩国男歌手</dt>
            <dd>숀</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:7002}})">
          <img src="https://p1.music.126.net/PtePFslTAC5CcrMjTakqmg==/109951163985094652.jpg" alt="">
          <dl>
            <dt>韩国女歌手</dt>
            <dd>제이플라</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:7003}})">
          <img src="https://p1.music.126.net/1FIm-hA4wbS-h_YuazZ5lA==/109951163992766119.jpg" alt="">
          <dl>
            <dt>韩国组合/乐队</dt>
            <dd>BTS (防弹少年团)</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:4001}})">
          <img src="https://p1.music.126.net/YmulJIg80SzAE7ZwDsmL0Q==/109951163212151801.jpg" alt="">
          <dl>
            <dt>其他男歌手</dt>
            <dd>Nguyễn Thái Hoà</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:4002}})">
          <img src="https://p2.music.126.net/iw9wRaO66jyTORrDQOmiEg==/109951163439597399.jpg" alt="">
          <dl>
            <dt>其他女歌手</dt>
            <dd>Nuzur Zeli</dd>
          </dl>
        </li>
        <li @click="$router.push({name:'Singersort',parmas:{cat:4003}})">
          <img src="https://p1.music.126.net/hiW4g1Luroh3vAnQeiRA3A==/109951163667563901.jpg" alt="">
          <dl>
            <dt>其他组合/乐队</dt>
            <dd>落日飞车</dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//引入 热门歌手,歌手分类列表 api
import { getHotSingers } from "@/api";

export default {
  data() {
    return {
      singers: []
    };
  },
  created() {
    this.getsingerslist();
  },
  methods: {
    getsingerslist() {
      getHotSingers().then(res => {
        // console.log(res);
        this.singers = res.data.artists;
      });
    }
  }
};
</script>

<style>
.Singer-box{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  color: #333;
  overflow: hidden;
}
.Singer-box>h2{
  width: 500px;
  height: 70px;
  text-indent: 30px;
  line-height: 70px;
}
.Singer-list {
  width: 750px;
  height: 100%;
  float: left;
}
.Singer-list > li {
  width: 130px;
  height: 180px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.Singer-list > li img {
  width: 100%;
  height: 80%;
  margin-bottom: 10px;
  border-radius: 5px;
}
.Singer-side {
  width: 350px;
  min-height: 700px;
  background: #f2f4f6;
  margin-right: 30px;
  float: right;
  padding-top: 10px;
  padding-left: 50px;
  box-sizing: border-box;
}
.Singer-side > h1 {
  text-align: left;
}
.Singer-side_list > li{
  width: 350px;
  height:60px;
  margin: 20px 20px 20px 0;
  overflow: hidden;
  cursor: pointer;
}
.Singer-side_list li img{
  width: 60px;
  height: 60px;
  border-radius: 5px;
  float: left;
}
.Singer-side_list li dl{
  margin-top: 6px;
  margin-left: 20px;
  float: left;
}
.Singer-side_list li dl dd{
  font-size: 12px;
  color: #999;
}
</style>